<template>
  <!-- 让Topbar实现重载功能，给组件增加一个key值，只要key变化了，组件就会加载了 -->
  <!-- 顶通栏组件 -->
  <Topbar :key="topBarKey" />
  <!-- 头部导航组件 -->
  <Header />
  <!-- 路由出口 -->
  <router-view @fn="topBarKeyFn" />
  <!-- 底部组件 -->
  <Footer />
  <!-- 多个组件都需要控制当前这个组件的显示和隐藏 -->
  <Login v-show="useLogin.isShowLoginModal" />
  <!-- 显示框组件 -->
  <Transition name="bounce">
    <Toast v-if="useToast.isToast" style="text-algin: center" />
  </Transition>
</template>

<script setup lang="ts">
import Toast from "@/components/toast/toast.vue";
import Footer from "@/components/footer/footer.vue";
import Header from "@/components/header/header.vue";
import Topbar from "@/components/topbar/topbar.vue";
import Login from "@/components/login/login.vue";
import { ref, watch, provide } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useShowLoginStore } from "@/store/showLogin";
import { useToastStore } from "@/store/showToast";
const useLogin = useShowLoginStore();
const useToast = useToastStore();
const route = useRoute();
const topBarKey = ref(0);
const topBarKeyFn = (val: number) => {
  topBarKey.value += val;
};

//监听topBar组件
watch(
  () => route.path,
  (newVal, oldVal) => {
    topBarKey.value += 1;
    console.log(newVal + "新", oldVal + "旧");
    if (oldVal != "/") {
      topBarKey.value += 1;
    }
  },
  { deep: true, immediate: true }
);
</script>

<style lang="less" scoped>
.bounce-enter-active {
  animation: bounce-in 0.5s;
}
.bounce-leave-active {
  animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
  }
}
</style>
